"use client";
export default function Sidebar({
    headings,
}: {
    headings: { text: string; level: number; id: string }[];
}) {
    return (
        <aside className="hidden lg:block w-64 bg-white border-r sticky top-16 h-screen overflow-auto p-4">
            <h2 className="font-bold ml-2 mb-4">Menu</h2>
            <ul>
                {headings.map((h) => (
                    <li
                        key={h.id}
                        className={h.level === 2 ? "mt-2" : "mt-1 ml-4"}
                    >
                        <a
                            href={`#${h.id}`}
                            className="text-gray-700 hover:text-blue-600"
                        >
                            {h.text}
                        </a>
                    </li>
                ))}
            </ul>
        </aside>
    );
}
